<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 800px;
      margin: 20px auto;
    }

    .list {
      width: 800px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    .list_one {
      width: 180px;
      margin-top: 20px;
      text-align: center;

    }




    .list_head {
      width: 800px;
      display: flex;
      justify-content: space-around;
      background: skyblue;
    }

    .list_head li {
      text-align: center;
      line-height: 50px;
      list-style: none;
    }

    .pro_wrap {
      width: 800px;
      position: relative;
    }

    .pro_wrap span {
      width: 130px !important;
      text-align: center;
    }

    .pro_one {
      width: 800px;
      text-align: center;
      display: flex;
      justify-content: space-around;
      position: relative;
      background: #ccc;
      margin-top: 15px;
    }

    .city_list {
      /* position: absolute;
      top: 0;
      left: 0; */
      width: 800px;
      display: none;
    }

    .city_list .city_one {
      width: 800px;
      justify-content: space-around;
      display: flex;
    }

    .pro_one>span:nth-child(1) {
      background: #00bec9;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <h1>疫情实时大数据报告</h1>
    <div class="now_data">
      <h3>国内疫情</h3>
      <h2 class="nowTime">数据更新至 2021.05.17 09:07</h2>
      <div class="list">
        <!-- <div class="list_one">
          <h4>现有确诊</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>无症状</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>现有疑似</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>现有重症</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>累计确诊</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>境外输入</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>累计治愈</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>累计死亡</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div> -->
      </div>
    </div>
    <!-- 城市疫情详细数据 -->

    <div class="city_content">
      <ul class="list_head">
        <li>地区</li>
        <li>新增</li>
        <li>现有</li>
        <li>累计</li>
        <li>治愈</li>
        <li>死亡</li>
      </ul>
      <div class="pro_list">
        <!-- <div class="pro_wrap">
          <div class="pro_one">
            <span>地区</span> <span>新增</span> <span>现有</span> <span>累计</span> <span>治愈</span> <span>死亡</span>
          </div>
          <div class="city_list">
            <div class="city_one">
              <span>地区</span> <span>新增</span> <span>现有</span> <span>累计</span> <span>治愈</span> <span>死亡</span>
            </div>
            <div class="city_one">
              <span>地区</span> <span>新增</span> <span>现有</span> <span>累计</span> <span>治愈</span> <span>死亡</span>
            </div>
          </div>
        </div> -->

      </div>
    </div>
  </div>
  <table>
    <tbody id="ccc"></tbody>
  </table>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    function loadData() {
      $.ajax({
        url: "http://route.showapi.com/2217-2",
        type: "get",
        data: {
          showapi_appid: "636284",
          showapi_sign: "5f73240ec17c419b997203cbb2ba6cb4"
        },
        success: function (res) {
          console.log(res)
          var today = res.showapi_res_body.todayStatictic;
          var updateTime = res.showapi_res_body.updateTime;//更新时间
          $(".nowTime").html(updateTime)
          console.log(today)
          // 渲染今日数据部分--------------------------------------------------
          var str = ` <div class="list_one">
                  <h4>现有确诊</h4>
                  <span class="noe">${today.confirmedNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>无症状</h4>
                  <span>${today.asymptomaticNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>现有疑似</h4>
                  <span>${today.suspectedNum == -1 ? '0' : today.suspectedNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>现有重症</h4>
                  <span>${today.seriousNum == -1 ? "0" : today.seriousNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>累计确诊</h4>
                  <span>${today.confirmedNum + today.curedNum + today.deadNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>境外输入</h4>
                  <span>${today.externalConfirmedNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>累计治愈</h4>
                  <span>${today.curedNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>累计死亡</h4>
                  <span>${today.deadNum}</span>
                  <h5>昨日+8</h5>
                </div>`
          $(".list").html(str)

          //渲染省市列表部分 -------------------------------------------------------
          var todayDetailList = res.showapi_res_body.todayDetailList;
          var mystr = ``;
          $.each(todayDetailList, function (index, ele) { //循环省的数据
            var cityStr = ``
            if (ele.cityList.length != 0) {
              // 提前生成好市的数据
              $.each(ele.cityList, function (ind, element) { //循环生成市
                cityStr += `<div class="city_one">
                  <span>${element.cityName}</span> <span>0</span> <span>${element.confirmedNum}</span> <span>${element.curedNum + element.confirmedNum}</span> <span>${element.curedNum}</span> <span>${element.curedNum}</span>
                  </div>`
              })
            }
            // 省的拼接
            mystr += `<div class="pro_wrap">
          <div class="pro_one">
            <span>${ele.provinceName}</span> <span>0</span> <span>${ele.suspectedNum}</span> <span>${ele.curedNum + ele.deadNum}</span> <span>${ele.curedNum}</span> <span>${ele.deadNum}</span>
          </div>
          <div class="city_list">
              ${cityStr}
          </div>
        </div>`
          })
          console.log(mystr)
          $(".pro_list").html(mystr)
        }
      })
    }
    // 点击省切换
    $(".pro_list").on("click", ".pro_one", function () {
      $(this).next().slideToggle();
    })
    loadData()


  </script>
</body>

</html>